<!-- 找学长学姐 -->
<template>
	<view class="lookFor">
		<view class="search-box">
			<view class="input-box flex alignCenter">
				<uni-icons type="search" size="20" color="#000" @click="handleSearch"></uni-icons>
				<input class="font14" placeholder="请输入大学名称" v-model="searchParam.schoolName" @input="handleSearch"/>
				<!-- <uni-icons  @click="handleClear" type="clear" size="18" :color="searchParam.exam.length>0?'#F7DD5E':'#fff'"></uni-icons> -->
			</view>
		</view>
		<view class="contents">
			<template v-for="(item,index) in tableList">
				<view :key="index" class="items" @click="handleItemClick(item)">
					<view class="flex">
						<image :src="item.createUserAvatar"></image>
						<view class="item-info">
							<view class="name font14 bold">{{item.createUserName}}</view>
							<view class="schoolItem font12">{{item.schoolName}} | {{item.majorName}} | {{item.graduationYear}}级</view>
							<view class="flex flexWrap font12">
								<view class="speciality" v-for="(val,i) in item.tags" :key="i">{{val}}</view>
							</view>
						</view>
					</view>
					<view class="flex alignCenter item-btn" v-if="userId!=item.createUserId">
						<view class="flex alignCenter font14" @click.stop="handleQuestion(item)"><image src="/static/image/setting/major.png" mode="aspectFill"></image> 提问</view>
						<view class="flex alignCenter font14" @click.stop="handleLookFor(1,item)"><image src="/static/image/setting/major.png" mode="widthFix"></image> 委托Ta找人</view>
					</view>
				</view>
			</template>
		</view>
		<uni-nodata v-if="tableList.length<=0"></uni-nodata>
		<view class="adS">
			<view class="ad-publishPeople font14"  @click="handleLookFor(2,'')">
				<view class="flex alignCenter">
					<view><text class="bold">没找到？</text> <view>发布找人信息，让人脉来帮你！</view> </view>
					<view class="btn font12">+立即发布</view>
				</view>
			</view>
		</view>
		<entrustPeople :showEntrustPeople="showEntrustPeople" :seniorSisterId="seniorSisterId" :seniorSisterName="seniorSisterName" :seniorSisterAvatar="seniorSisterAvatar" @cancelEntrust="cancelEntrust"></entrustPeople>
	</view>
</template>

<script>
	import { allGraduateStudents} from "@/api/lookFor.js"
	import entrustPeople from "./entrustPeople/entrustPeople.vue"
	export default {
		components:{
			entrustPeople,
		},
		data() {
			return {
				total: 0,
				searchParam: {
					schoolName: '',
					pageNum: 1,
				},
				showEntrustPeople: false,
				seniorSisterId: '',
				seniorSisterName: '',
				seniorSisterAvatar: '',
				tableList: [],
				userId:''
			}
		},
		onShow(){
			// 用来判断若是本人没有委托按钮
			this.userId=uni.getStorageSync('userId') || ''
			this.getData();
		},
		methods: {
			handleSearch(){
				this.searchParam.pageNum = 1;
				this.getData();
			},
			getData(){
				uni.showLoading({
					title: '数据加载中...'
				})
				allGraduateStudents({
					page: this.searchParam.pageNum,
					size: 10,
					schoolName:this.searchParam.schoolName
				}).then(res=>{
					if(res.data.code == 100000){
						if(this.searchParam.pageNum == 1){
							this.tableList = res.data.rows;
							this.total = res.data.total;
						}else{
							this.tableList.push.apply(this.tableList,res.data.rows);
						}
						
						uni.hideLoading();
					}
				})
			},
			// 学长学姐基本信息
			handleItemClick(val){
				uni.navigateTo({
					url: `/pages/mine/homePage/homePage?userId=${val.createUserId}`
				})
			},
			// 提问
			handleQuestion(val){
				// id=${this.taskItem.id}&title=${this.taskItem.title}&type=note&groupId=${groupId}
				uni.navigateTo({
					url: `/pages/send/question/question?from=seniorSister&id=${val.createUserId}&title=${val.createUserName}`
				})
			},
			/**
			 * @param {Object} type 1、委托他找人，2、发布找人
			 * @param {Object} item 委托学长/学姐信息
			 */
			handleLookFor(type,item){
				if(type==1){
					this.seniorSisterId = item.createUserId;
					this.seniorSisterName = item.createUserName;
					this.seniorSisterAvatar = item.createUserAvatar;
					this.showEntrustPeople = true;
					return;
				}
				uni.navigateTo({
					url: `/pages/send/lookFor/publishPeople/publishPeople?type=${type}&items=${JSON.stringify(item)}`
				})
			},
			// 委托找人回调
			cancelEntrust(){
				this.showEntrustPeople = false;
			},
			
			//底部刷新
			onReachBottom() {
				if(this.tableList.length>=this.total) return;
				this.searchParam.pageNum++;
				this.getData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lookFor{
		background: rgba(235, 238, 239, 0.8);
		min-height: 100vh;
		.search-box{
			padding-top: 30rpx;
			.input-box{
				background: #fff;
				justify-content: center;
				border: 1px solid rgba(242, 242, 242, 1);
				border-radius: 50rpx;
				margin: 0 30rpx;
				height: 68rpx;
				
				input{
					margin: 0 10rpx;
					width: 400rpx;
				}
			}
		}
		.contents{
			margin: 30rpx;
			// margin-bottom: 20rpx;
			padding-bottom: 200rpx;
			.items{
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				padding: 14rpx 36rpx 48rpx 30rpx;
				image{
					width: 112rpx;
					height: 112rpx;
					border-radius: 50%;
					margin-right: 30rpx;
					margin-top: 46rpx;
				}
				.item-info{
					width: 78%;
					.name{
						color: #333;
						line-height: 56rpx;
					}
					.schoolItem{
						color: #333;
						// line-height: 1em;
					}
					.speciality{
						line-height: 1em;
						margin-top: 30rpx;
						color: #FF7D5D;
						margin-right: 10rpx;
					}
					.speciality:last-child{
						marign-right: 0rpx;
					}	
				}
				
				.item-btn{
					justify-content: flex-end;
					line-height: 1em;
					margin-top: 40rpx;
					// margin-bottom: 20rpx;
					margin-right: 20rpx;
					view:last-child{
						margin-left: 40rpx;
					}
					image{
						width: 32rpx;
						height: 32rpx;
						margin-top: 0rpx;
						margin-right: 12rpx;
					}
				}
				
			}
		}
		
		.adS{
			width: 100%;
			position: fixed;
			bottom: 20rpx;
			.ad-publishPeople{
				// background: rgba(254, 213, 52, 1);
				background: url("../static/lookBgn.png") no-repeat;
				background-size: cover;
				background-repeat: no-repeat;
				height: 120rpx;
				width: 672rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				margin: auto;
				>view{
					width: 100%;
					padding: 0 30rpx;
					justify-content: space-between;
				}
				
				.btn{
					background: #2E383E;
					color: #FED534;
					width: 134rpx;
					height: 60rpx;
					border-radius: 40rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}
			
			.ad-list{
				margin: 32rpx 0;
				height: 200rpx;
				background: #fff;
				// border-radius: 10rpx;
			}
		}
		
		
	}
</style>